<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>
			图片懒加载 - https://juejin.cn/post/7134706181863374878#heading-4
		</title>
		<style>
			img {
				height: 10px;
				width: 10px;
			}

			p {
				position: relative;
				line-height: 20px;
				max-height: 40px;
				overflow: hidden;
			}

			p::after {
				content: '...';
				position: absolute;
				bottom: 0;
				right: 0;
				padding-left: 40px;
				background: -webkit-linear-gradient(
					left,
					transparent,
					#fff 55%
				);
				background: -o-linear-gradient(right, transparent, #fff 55%);
				background: -moz-linear-gradient(right, transparent, #fff 55%);
				background: linear-gradient(to right, transparent, #fff 55%);
			}
		</style>
	</head>

	<body>
		<p>image 之前</p>
		<!-- <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> -->
		<img
			src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF?id=1"
			alt=""
			id="img"
		/>
		<img
			src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF?id=2"
			alt=""
			id="img"
		/>
		<img
			src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF?id=3"
			alt=""
			id="img"
		/>
		<img
			src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF?id=4"
			alt=""
			id="img"
		/>
		<img
			src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF?id=5"
			alt=""
			id="img"
		/>
		<!-- <script>
            let image = new Image()
            image.onload = function () {
                console.log('image', image)
                const img = document.getElementById('img')
                img.src = image.src
            }
            image.onerror = function (err) {
                console.log('image', image, err)
            }
            image.src = 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
        </script> -->
		<img
			src="https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF"
			alt=""
			id="img"
		/>
		<iframe src="./003-三角形实现.html" frameborder="0"></iframe>
		<div>
			<div>image 之后</div>
		</div>
	</body>
</html>
